<template>
  <view>
	<view class="hdtag">
		<u-tabs
			:list="splist" 
			:height="80" 
			name="categoryName"  
			:active-color="'#EF7B3A'"	
			:is-scroll="false" 
			:current="current" 
			@change="handleTabChange" 
			style="width: 100%;"
			:transition="tabTransition"
		></u-tabs>
	</view>
    <!-- 加载状态遮罩 -->
    <view v-if="isLoading" class="loading-mask">
      <view class="loading-container">
        <view class="loading-spinner">
          <view class="spinner-dot"></view>
          <view class="spinner-dot"></view>
          <view class="spinner-dot"></view>
        </view>
        <view class="loading-text">加载中...</view>
      </view>
    </view>
    
    <view class="actlist">
      <view class="list_itme fade-in" v-for="(item,index) in AcList" :key="index"  @click="viewDetail(item)" v-if="current == 0">
        <image :src="'https:'+ item.coverImage" mode="" class="corve_img"></image>
        <view class="title">{{item.title}}</view>
        <view class="time">
          <view>活动时间：{{item.startTime + '-' + item.endTime}}</view>
		  <view>{{item.paymentType == 0 ? '免费' : (item.paymentType == 1 ? item.paymentAmount + '积分' : '￥' + item.paymentAmount )}}</view>
        </view>
        <view class="check" :style="item.isFull == 1 ? 'background-color: #ccc;color:#fff' : ''"> {{item.isFull == 0  ? '查看详情' : '报名名额已满'}}</view>
      </view>
      <view class="list_itme fade-in" v-for="(item,index) in AcList" :key="index"  @click="viewDetail(item)" v-if="current == 1">
        <image :src="'https:'+ item.coverImage" mode="" class="corve_img" ></image>
        <view class="title">{{item.title}}</view>
        <view class="time" style="padding-bottom: 30rpx;">
          活动时间：{{item.activityTime}}
        </view>
      </view>
      <!-- 加载更多提示 -->
      <view class="loading-more" v-if="isLoadingMore">
        <view class="loading-more-spinner">
          <view class="spinner-dot"></view>
          <view class="spinner-dot"></view>
          <view class="spinner-dot"></view>
        </view>
        <view class="loading-more-text">加载更多...</view>
      </view>
      
      <!-- 没有更多数据提示 -->
      <view class="no-more" v-if="!isLoadingMore  && AcList.length >= total">
        <view class="no-more-text">没有更多数据了</view>
      </view>
    </view>
  </view>
</template>

<script>
import { activitypage , activityReviewpage } from '@/core/api/index.js'
export default{
  data(){
    return{
      total: 0,
      AcList: [],
      isLoading: false, // 初始加载状态
      isLoadingMore: false, // 加载更多状态
      currentPage: 1, // 当前页码
      pageSize: 20, // 每页数量
      isEnd: false ,// 是否加载完毕
	  splist:[
		  {
			  categoryName:"活动报名",
		  },
		  {
			  categoryName:"活动回顾",
		  }
	  ],
	  current:0
    }
  },
  onLoad() {
    this.fetchActivityList()
  },
  onReachBottom() {
    // 页面触底时加载更多
    if (!this.isEnd && !this.isLoadingMore) {
      this.loadMore()
    }
  },
  methods:{
	handleTabChange(e) {
		this.AcList = []
		this.current = e
		if(e == 0){
			this.fetchActivityList()
		}else{
			this.AvisHlist()
		}
	},
	//活动回顾
	async AvisHlist(){
		this.isLoading = true
		this.currentPage = 1
		
		try {
		  const params = {
		    page: this.currentPage,
		    size: this.pageSize
		  }
		  const { data } = await activityReviewpage(params)
		  this.AcList = data.records || []
		  this.total = data.total || 0
		  this.isEnd = this.AcList.length >= this.total
		  console.log('初始加载数据:', data ,  this.AcList)
		} catch (error) {
		  console.error('获取活动列表失败:', error)
		  uni.showToast({
		    title: '网络请求失败',
		    icon: 'none'
		  })
		} finally {
		  this.isLoading = false
		}
	},
    // 初始加载活动列表
    async fetchActivityList() {
      this.isLoading = true
      this.currentPage = 1
      
      try {
        const params = {
          page: this.currentPage,
          size: this.pageSize
        }
        const { data } = await activitypage(params)
        this.AcList = data.records || []
        this.total = data.total || 0
        this.isEnd = this.AcList.length >= this.total
        console.log('初始加载数据:', data)
      } catch (error) {
        console.error('获取活动列表失败:', error)
        uni.showToast({
          title: '网络请求失败',
          icon: 'none'
        })
      } finally {
        this.isLoading = false
      }
    },
    viewDetail(item){
		if(item.isFull == 1) return
		if(this.current == 0){
		    uni.navigateTo({
		    	url:'/pages/activity/details?id=' + item.id
		    })	
		}else{
			uni.navigateTo({
				url:'/pages/activity/hgdetails?item=' + encodeURIComponent(JSON.stringify(item))
			})	
		}
	},
    // 加载更多
    async loadMore() {
      if (this.isEnd || this.isLoadingMore) return
      
      this.isLoadingMore = true
      this.currentPage++
      
      try {
        const params = {
          page: this.currentPage,
          size: this.pageSize
        }
        if(this.current == 0){
			const { data } = await activitypage(params)
		}else{
			const { data } = await activityReviewpage(params)
		}
        const newList = data.records || []
        
        // 合并新旧数据
        this.AcList = [...this.AcList, ...newList]
        this.total = data.total || 0
        this.isEnd = this.AcList.length >= this.total
        
        console.log('加载更多数据:', data)
      } catch (error) {
        console.error('加载更多失败:', error)
        uni.showToast({
          title: '网络请求失败',
          icon: 'none'
        })
        // 加载失败时回退页码
        this.currentPage--
      } finally {
        this.isLoadingMore = false
      }
    }
  }
}
</script>

<style>
.fade-in {
  animation: fadeIn 0.5s ease forwards;
  opacity: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

<style lang="scss">
.hdtag{
	position: fixed;
	width: 100%;
	z-index: 1111;
}
.actlist{
  padding: 100rpx 30rpx 20rpx;
  .list_itme{
    background-color: #fff;
    margin-bottom: 30rpx;
	border-radius: 20rpx 20rpx 0 0;
    padding-bottom: 10rpx;
    image{
      width: 100%;
      height: 380rpx;
	  border-radius: 20rpx 20rpx 0 0;
    }
    .title , .time{
      padding-left: 30rpx;
    }
    .title{
      font-size: 32rpx;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  width: 670rpx;
      margin: 10rpx 0 8rpx;
    }
    .time{
      color: #666666;
      font-size: 24rpx;
	  display: flex;
	  justify-content: space-between;
	  padding-right: 30rpx;
	  // position: relative;
	  view:nth-child(2){
		  color: #F26B2E;
		  // position: absolute;
		  font-size: 28rpx;
		  top: -20rpx;
		  right: 30rpx;
	  }
    }
    .check{
      margin: 30rpx 30rpx;
      text-align: center;
      line-height: 80rpx;
      height: 80rpx;
      background-color: #FBE0CF;
    }
  }
  
  // 加载更多提示
  .loading-more {
    padding: 30rpx 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .loading-more-spinner {
      display: flex;
      margin-right: 20rpx;
      
      .spinner-dot {
        width: 20rpx;
        height: 20rpx;
        margin: 0 5rpx;
        border-radius: 50%;
        background-color: #F26B2E;
        animation: bounce 1.4s infinite ease-in-out both;
      }
      
      .spinner-dot:nth-child(1) {
        animation-delay: -0.32s;
      }
      
      .spinner-dot:nth-child(2) {
        animation-delay: -0.16s;
      }
    }
    
    .loading-more-text {
      font-size: 26rpx;
      color: #666;
    }
  }
  
  // 没有更多数据提示
  .no-more {
    padding: 120rpx 0;
    text-align: center;
    
    .no-more-text {
      font-size: 26rpx;
      color: #999;
    }
  }
}

/* 加载动画样式 */
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-container {
  text-align: center;
}

.loading-spinner {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}

.spinner-dot {
  width: 20rpx;
  height: 20rpx;
  margin: 0 10rpx;
  border-radius: 50%;
  background-color: #F26B2E;
  animation: bounce 1.4s infinite ease-in-out both;
}

.spinner-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.spinner-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  } 
  40% {
    transform: scale(1.0);
  }
}

.loading-text {
  font-size: 28rpx;
  color: #333;
}
</style>
